<template>
  <div class="homepage_box">
    <div class="home_header">
      <Header />
    </div>
    <div class="home_nav">
      <Nav />
    </div>
    <div :class="this.$store.state.isCollapse==true? 'home_content changeleft' :'home_content '">
      <Content style="height:100%;overflow:auto"/>
    </div>
  </div>
</template>
 
<script>
import Header from "./children/Header";
import Nav from "./children/Nav";
import Content from "./children/Content";
export default {
  data() {
    return {};
  },
  components: {
    Header,
    Nav,
    Content,
  },
};
</script>
 
<style lang = "less" scoped>
.homepage_box {
  height: 100%;
  position: relative;
  .home_header {
    width: 100%;
    height: 70px;
    background-color: #409eff;
  }
  .home_nav {
    position: fixed;
    width: 250px;
    top: 70px;
    left: 0;
    bottom: 0;
    background-color: #545c64;
  }

  .home_content {
    position: fixed;
    top: 70px;
    left: 250px;
    bottom: 0;
    right: 0;
    background-color: #f0f0f0;
    box-sizing: border-box;
    padding: 20px 15px 0;
  }
  .changeleft {
    left: 50px;
    transition: left 0.5s linear;
  }
}
</style>